#father{
    margin:0 auto;
    width: 600px;
  .child>span{
    display: inline-block;
    padding: 5px;
    background-color: skyblue;
    border-radius: 5%;
  }
}
.msg>.child::before{
    content: "";
    clear: both;
    display: block;
}
.msg>.child::after{
    content:"";
    clear: both;
    display: block;
}
.msg>.child:nth-child(odd)>span{
    float: left;
}
.msg>.child:nth-child(even)>span{
    float: right;
}
.msg{
    visibility: hidden;
}
#title:hover+.msg{
    visibility: visible;
    cursor: pointer;
}
#title:hover{
    display: none;
    cursor: pointer;
}